<template>
  <div class="main-content">
    <el-row>
      <el-button
        size="medium"
        class="filter-item"
        type="primary"
        @click="handleCreate"
      >新增配置</el-button
      >
    </el-row>

    <p class="maintitle">配置列表</p>

    <el-table :data="tableData" border>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column type="index" label="ID" align="center" />
      <el-table-column prop="key" label="英文名" width="150" align="center" />
      <el-table-column prop="name" label="中文名" width="150" align="center" />
      <el-table-column prop="is_arr" label="是否数组" width="150" align="center" :formatter="formatOutput" />
      <el-table-column prop="value" label="值" align="center" />
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" title="确认删除当前配置？" @confirm="deleteRow(row.id)" style="margin-left: 10px">
            <el-button size="mini" type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="100">
      <el-form
        :model="form"
        ref="acForm"
        label-position="left"
        label-width="150px"
        :inline="true"
      >
        <el-row>
          <el-form-item
            label="英文名"
            prop="key"
            :rules="[{ required: true, message: 'key不能为空' }]"
          >
            <el-input clearable v-model="form.key"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item
            label="中文名"
            prop="name"
            :rules="[{ required: true, message: '中文名称不能为空' }]"
          >
            <el-input clearable v-model="form.name"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item
            label="值"
            prop="value"
            :rules="[{ required: true, message: '值不能为空' }]"
          >
            <el-input clearable v-model="form.value"  placeholder="数组用英文竖线隔开" style="width: 400px"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item
            label="是否数组"
            prop="is_arr"
          >
            <el-switch
              v-model="form.is_arr"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? updateData('') : updateData()"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import {
  getConfigList,
  delConfig,
  saveConfig
} from "@/app/api/config";
import { mapState } from "vuex";
import Pagination from "@/app/components/Pagination";

export default {
  components: {
    Pagination,
  },
  name: "config",
  data() {
    return {
      importVisible: false,
      loading: false,
      tableData: [],
      listLoading: true,
      dialogVisible: false,
      dialogVisible1: false,
      form: {},
      form1: {
        valueP: [],
      },
      dialogStatus: "", //编辑或新增
      textMap: {
        update: "编辑",
        create: "新增",
      }
    };
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getConfigList({})
        .then((res) => {
          this.tableData = res.data;
          console.log(this.tableData);
          this.listLoading = false;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    deleteRow(id) {
      delConfig({ id })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "删除成功",
              type: "success",
              duration: 5 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("save error", error);
        });
    },
    handleEdit(row) {
      this.form = Object.assign({}, this.form, row);
      this.dialogStatus = "update";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["acForm"].clearValidate();
      });
    },
    handleCreate() {
      this.form = {
        key: "",
        name: "",
        value: "",
      };
      this.dialogStatus = "create";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["acForm"].clearValidate();
      });
    },
    updateData(id) {
      this.$refs["acForm"].validate((valid) => {
        if (valid) {
          if (id) {
            this.form.id = id;
          }
          saveConfig(this.form)
            .then((res) => {
              if (res.code == "00000") {
                Message({
                  message: "操作成功",
                  type: "success",
                  duration: 2 * 1000,
                });
                this.getList();
                this.dialogVisible = false;
              }
            })
            .catch((error) => {
              console.log("editOrder error", error);
            });
        } else {
          return false;
        }
      });
    },
    formatOutput: function (row, column, cellValue) {
      if (cellValue === "1"){
        return '是';
      }else if (cellValue === "0"){
        return '否';
      }
    }
  },
};
</script>

<style>
.el-table__header {
  border-collapse: inherit;
}
</style>
